<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的购物车</title>
	<link rel="icon" href="/favicon.ico" />
    <link rel="stylesheet" href="/css/reset.css" />
    <link rel="stylesheet" href="/lib/icon-font/iconfont.css" />
    <link rel="stylesheet" href="/css/header.css" />
    <link rel="stylesheet" href="/css/footer.css" />
    <link rel="stylesheet" href="/css/cart.css" />
</head>

<body>
    <!-- 头部黑色导航 -->
    <header></header>
    <!-- 中间内容部分的样式 -->
    <section>
        <div class="container">
            <div class="shoplist">
                
            </div>
        </div>
        
        <script type="text/html" id="cartListTemplate">
            <div class="listtheme">
                <h1>购物清单</h1>
            </div>
            <ul class="listtittle">
                <li>商品信息</li>
                <li>单价</li>
                <li>数量</li>
                <li>小计</li>
                <li>操作</li>
            </ul>
            {{each list item}}
            <ul class="goods">
                <li>
                    <input type="checkbox" />
                    <img src="{{item.img}}" />
                    <div>
                        <h2>{{item.name}}</h2>
                        <p>黑色</p>
                    </div>
                </li>
                <li>&yen;{{item.price}}</li>
                <li class="computed">
                    <!-- class="notreduce"不能点击 -->
                    <button class="reduce">-</button>
                    <em>{{item.count}}</em>
                    <button class="addnum">+</button>
                </li>
                <li>
                    <b>&yen;{{item.price*item.count}}</b>
                    <i>已优惠 &yen;9.90</i>
                </li>
                <li class="del">
                    <span class="iconfont icon-cha1"></span>
                </li>
            </ul>
            {{/each}}
            
            <!-- 如果超出某一个固定值则移除allscroll，否则加上allscroll -->
            <div class="allmsg">
                <div class="leftmsg">
                    <input type="checkbox">
                    <h3>全选</h3>
                    <span>删除选中的商品</span>
                </div>
                <div class="rightmsg">
                    <div>
                        <h2>已选择 <em class="allCount"></em> 件商品</h2>
                        <b>共计 <i class="allCount"></i> 件商品</b>
                    </div>
                    <div>
                        <h2>应付总额： <em class="allPrice"></em></h2>
                        <b>总额节省： <i class="allSave"></i></b>
                    </div>
                    <button>现在结算</button>
                </div>
            </div>
        </script>

        <!-- 相关推荐部分 -->
		<div class="suggestion">
			<div class="container">
				<h2>相关推荐</h2>
				<!-- 第一行推荐 -->
				<ul>
					<li>
						<a><img src="../img/sugimg1.jpg" /></a>
						<h3>Smartain 颈挂式耳机</h3>
						<p>"铁圈一体代表作"</p>
						<span>自营配件 满300减40</span>
						<b>
							<span class="black"></span>
						</b>
						<em>&yen;149.00<del>199.00</del></em>
						<strong>查看详情</strong>
						<i class="showtips">满减</i>
						<aside>大促</aside>
					</li>
					<li>
						<a><img src="../img/sugimg2.jpg" /></a>
						<h3>坚果弯头数据线</h3>
						<p>"3A"大电流</p>
						<span>自营配件 满300减40</span>
						<b>
						</b>
						<em>&yen;19.90<del>24.90</del></em>
						<strong>查看详情</strong>
						<i class="showtips">满减</i>
						<aside>大促</aside>
					</li>
					<li>
						<a><img src="../img/sugimg3.jpg" /></a>
						<h3>坚果 Pro 3 足迹保护套</h3>
						<p>这一次两面都有好故事</p>
						<span>手机壳低至两件49元</span>
						<b>
						</b>
						<em>&yen;39.00<del>49.00</del></em>
						<strong>查看详情</strong>
						<i class="showtips">满减</i>
						<aside>大促</aside>
					</li>
					<li>
						<a><img src="../img/sugimg4.jpg" /></a>
						<h3>坚果 Pro 3 足迹保护套</h3>
						<p>这一次两面都有好故事</p>
						<span>手机壳低至两件49元</span>
						<b>
						</b>
						<em>&yen;39.00<del>49.00</del></em>
						<strong>查看详情</strong>
						<i class="showtips">满减</i>
						<aside>大促</aside>
					</li>
				</ul>
				<!-- 第二行推荐 -->
				<ul>
					<li>
						<a><img src="../img/sugimg5.jpg" /></a>
						<h3>足迹保护套 人类首次公开使用乙醚</h3>
						<p>公益宝贝</p>
						<span>手机壳低至两件79元</span>
						<b>
						</b>
						<em>&yen;59.00<del>69.00</del></em>
						<strong>查看详情</strong>
						<i class="showtips">满减</i>
						<aside>大促</aside>
					</li>
					<li>
						<a><img src="../img/sugimg6.jpg" /></a>
						<h3>足迹保护套 英国自然科学杂志《自然》</h3>
						<p>公益宝贝</p>
						<span>手机壳低至两件79元</span>
						<b>
						</b>
						<em>&yen;59.00<del>69.00</del></em>
						<strong>查看详情</strong>
						<i class="showtips">满减</i>
						<aside>大促</aside>
					</li>
					<li>
						<a><img src="../img/sugimg7.jpg" /></a>
						<h3>畅呼吸电子温湿度计</h3>
						<p>冷暖干湿，一目了然</p>
						<span>双12大促</span>
						<b>
							<span></span>
						</b>
						<em>&yen;79.00<del>99.00</del></em>
						<strong>查看详情</strong>
						<i>满减</i>
						<aside class="showtips">直降</aside>
					</li>
					<li>
						<a><img src="../img/sugimg8.jpg" /></a>
						<h3>坚果快充移动电源 10000mAh</h3>
						<p>支持QC3.0/PD3.0协议</p>
						<span>自营配件 满300减40</span>
						<b>
							<span class="gray"></span>
						</b>
						<em>&yen;69.00<del>119.00</del></em>
						<strong>查看详情</strong>
						<i class="showtips">满减</i>
						<aside>大促</aside>
					</li>
				</ul>
			</div>
		</div>
    </section>
    <!-- 底部备案信息 -->
    <footer></footer>
   
    <script src="/lib/require/require.js" data-main="/js/cart"></script>
</body>

</html>